import React, { Component } from 'react'
import "../assets/styles/todolist.css"

export default class TabD extends Component {
    state = {
        list: [
            { id: 1, task: "vue", status: true, edit: false },
            { id: 2, task: "react", status: false, edit: false },
            { id: 3, task: "python", status: false, edit: false }
        ],
        currentStatus: "all"
    }
    get finishTask() {
        const { list } = this.state
        return list.filter(item => item.status).length
    }
    get unFinishTask() {
        const { list } = this.state
        return list.filter(item => !item.status).length
    }
    //根据currentStatus来返回对应状态的数据
    get filterData() {
        const { currentStatus, list } = this.state
        switch (currentStatus) {
            case "all":
                return list
            case "done":
                return list.filter(item => item.status)
            case "undone":
                return list.filter(item => !item.status)
        }
    }
    changeStatus = (id) => {
        //根据编号找到对象
        const { list } = this.state
        const index = list.findIndex(item => item.id == id)
        list[index].status = !list[index].status
        this.setState({
            list
        })
    }
    addTask = () => {
        //获取文本框的值
        const { list } = this.state
        const value = this.inputElement.value
        console.log(value);
        const obj = {
            id: Date.now(),
            task: value,
            status: false,
            edit: false
        }
        list.push(obj)
        this.setState({
            list
        })
        this.inputElement.value = ""
    }
    editTask = (event,id)=>{
        //根据编号找到对象
        const {list} = this.state
        const index = list.findIndex(item=>item.id == id)
        list[index].edit = !list[index].edit
        console.log(event.target);
        if(event.target.innerText="编辑"){
            if(this.updateTaskElement){
                const value = this.updateTaskElement.value
                list[index].task = value
            }
        }
        this.setState({
            list
        })
    }
    render() {
        const { list } = this.state
        return (
            <div>
                <h3>todolist</h3>
                <div>
                    <input ref={element => this.inputElement = element} type="text" />
                    <button onClick={this.addTask}>添加</button>
                </div>
                <div>
                    <ul>
                        {this.filterData.map(item => {
                            return <li onClick={() => this.changeStatus(item.id)} style={{ fontSize: "20px" }} className={item.status ? "done" : ""} key={item.id} >
                                {!item.edit?
                                <span>{item.task}</span>:
                                <input type="text" ref={element=>this.updateTaskElement=element} defaultValue={item.task} />}
                                
                                <button onClick={(event)=>this.editTask(event,item.id)}>{item.edit?"关闭":"编辑"}</button>
                            </li>

                            // <>
                            //     {!item.edit ? <li onClick={() => this.changeStatus(item.id)} style={{ fontSize: "20px" }} className={item.status ? "done" : ""} key={item.id} >
                            //         <span>{item.task}</span>
                            //         <button>编辑</button>
                            //     </li> : <li onClick={() => this.changeStatus(item.id)} style={{ fontSize: "20px" }} className={item.status ? "done" : ""} key={item.id} >
                            //         <input type="text" />
                            //         <button>关闭</button>
                            //     </li>}
                            // </>

                        })}
                    </ul>
                </div>
                <div>
                    <button onClick={() => this.setState({ currentStatus: "all" })} className='check'>全部</button>
                    <button onClick={() => this.setState({ currentStatus: "done" })}>已完成</button>
                    <button onClick={() => this.setState({ currentStatus: "undone" })}>未完成</button>
                </div>
                <div>
                    任务总数量{list.length}个，完成{this.finishTask}个，未完成{this.unFinishTask}个
                </div>
            </div >
        )
    }
}
